<!--
 * @Description: 拓扑模型
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-21 16:25:04
 * @LastEditTime: 2021-10-23 15:34:10
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    title="Overlay拓扑"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <div class="topology-box" id="container"></div>
  </el-dialog>
</template>

<script>
import G6 from '@antv/g6';
export default {
  props: ['dialogStatus', 'overlay'],
  data () {
    return {};
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.showChart();
    });
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
    },
    // 画图
    showChart () {
      let _this = this;
      if (_this.overlay.type === 'Hub') {
        // 数据处理
        let result = {};
        let hubs = _this.overlay.hubSites;
        let spokes = _this.overlay.fullSites;
        if (hubs.length === 2) {
          result = {
            id: hubs[0].siteName + ' or ' + hubs[0].siteName,
            children: []
          };
        } else {
          result = {
            id: hubs[0].siteName,
            children: []
          };
        }
        let arry = [];
        for (let i = 0; i < spokes.length; i++) {
          arry.push({
            id: spokes[i].siteName
          });
        }
        result.children = arry;
        const graph = new G6.TreeGraph({
          container: 'container',
          width: 460,
          height: 450,
          linkCenter: true,
          modes: {
            default: [
              {
                type: 'collapse-expand',
                onChange: function onChange (item, collapsed) {
                  const data = item.getModel();
                  data.collapsed = collapsed;
                  return true;
                },
              },
              'drag-canvas',
              'zoom-canvas',
            ],
          },
          defaultNode: {
            size: 26,
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
          },
          defaultEdge: {
            type: 'cubic-vertical',
          },
          layout: {
            type: 'compactBox',
            direction: 'TB',
            getId: function getId (d) {
              return d.id;
            },
            getHeight: function getHeight () {
              return 16;
            },
            getWidth: function getWidth () {
              return 16;
            },
            getVGap: function getVGap () {
              return 80;
            },
            getHGap: function getHGap () {
              return 20;
            },
          },
        });
        graph.node(function(node) {
          let position = 'right';
          let rotate = 0;
          if (!node.children) {
            position = 'bottom';
            rotate = Math.PI / 2;
          }
          return {
            label: node.id,
            labelCfg: {
              position,
              offset: 5,
              style: {
                rotate,
                textAlign: 'start',
              },
            },
          };
        });
        graph.data(result);
        graph.render();
        graph.fitCenter(true);
      } else {
        // 数据处理
        let nodes = [];
        let edges = [];
        let fulls = _this.overlay.fullSites;
        for (let i = 0; i < fulls.length; i++) {
          nodes.push({
            id: fulls[i].siteId.toString(),
            label: fulls[i].siteName
          });
        }
        for (let i = 0; i < nodes.length; i++) {
          for (let j = 0; j < nodes.length; j++) {
            if (i !== j) {
              edges.push({
                source: nodes[i].id,
                target: nodes[j].id,
              });
            }
          }
        }
        let result = {
          nodes,
          edges
        };
        const graph = new G6.Graph({
          container: 'container',
          width: 460,
          height: 450,
          modes: {
            default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
          },
          layout: {
            type: 'grid',
            begin: [20, 20],
            width: 460 - 20,
            height: 450 - 20,
          },
          animate: true,
          defaultNode: {
            size: 20,
          },
        });
        graph.node(function(node) {
          let rotate = 0;
          return {
            label: node.label,
            labelCfg: {
              position: 'bottom',
              offset: 5,
              style: {
                rotate,
                textAlign: 'start',
              },
            },
          };
        });
        graph.data(result);
        graph.render();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>